<!-- 货源列表 -->
<template>
    <div class='main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="状态">
                <el-select v-model="formInline.zt" placeholder="选择审核状态" @change="changeStatusSelect">
                    <el-option label="全部" :value="-1"></el-option>
                    <el-option label="上架" :value="0"></el-option>
                    <el-option label="下架" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发货地">
                <el-input v-model="formInline.ship_address" placeholder="输入发货地"></el-input>
            </el-form-item>
            <el-form-item label="收货地">
                <el-input v-model="formInline.to_address" placeholder="输入收货地"></el-input>
            </el-form-item>
            <el-form-item label="运费类型">
                <el-select v-model="formInline.type" placeholder="选择运费类型" @change="changeStatusSelect">
                    <el-option label="全部" :value="-1"></el-option>
                    <el-option label="面议" :value="0"></el-option>
                    <el-option label="固定单价" :value="1"></el-option>
                    <el-option label="司机抢单" :value="2"></el-option>
                </el-select>
            </el-form-item>
        </CustomForm>
        <div style="width: 100%;height: 30px;"></div>
        <el-table :data="tableData" height="650" border style="width: 100%" v-loading="tableLoading">
            <el-table-column prop="id" label="货源编号" align="center" width="80">
            </el-table-column>
            <el-table-column prop="company_name" label="公司名称" align="center" width="80">
            </el-table-column>
            <el-table-column prop="" label="发货地" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                    {{ scope.row.ship_address + ' ' + scope.row.detail_address }}
                </template>
            </el-table-column>
            <el-table-column prop="shxydm" label="收货地" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                    {{ scope.row.to_address + ' ' + scope.row.to_detail_address }}
                </template>
            </el-table-column>
            <el-table-column prop="models" label="所需车型" align="center">
            </el-table-column>
            <el-table-column prop="chechang" label="所需车长" width="100" align="center">
            </el-table-column>
            <el-table-column prop="end_time" label="截止日期" width="160" align="center">
            </el-table-column>
            <el-table-column prop="goods" label="货物名称" align="center">
            </el-table-column>
            <el-table-column prop="type" label="货物类型" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                    <span v-if="config && config.goodsType">{{ config.goodsType[scope.row.types] }}</span>
                    <span v-else>{{ scope.row.type }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="weight" label="货物重量" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.weight }}</span>
                    <span>{{ scope.row.danwei ? scope.row.danwei : '吨' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="weight" label="运费类型" :show-overflow-tooltip="true" align="center" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.huo_price_type == 0">面议</span>
                    <span v-else-if="scope.row.huo_price_type == 1">固定单价</span>
                    <span v-else-if="scope.row.huo_price_type == 2">司机抢单</span>
                </template>
            </el-table-column>
            <el-table-column prop="huo_price" label="运费单价" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.huo_price_type == 1">{{ scope.row.huo_price }}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="80">
                <template slot-scope="scope">
                    <span v-if="scope.row.zt == 0" style="color: green;">已上架</span>
                    <span v-else-if="scope.row.zt == 1" style="color: red;">已下架</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary"
                        @click="detailsHandler(scope.$index, scope.row)">详情</el-button>
                    <el-button v-if="scope.row.zt == 0" size="mini" type="danger"
                        @click="sourceHandler(scope.$index, scope.row.id, 0)">下架</el-button>
                    <el-button v-if="scope.row.zt == 1" size="mini" type="primary"
                        @click="sourceHandler(scope.$index, scope.row.id, 1)">删除</el-button>
                    <el-button v-if="scope.row.zt == 1" size="mini" type="primary"
                        @click="sourceHandler(scope.$index, scope.row.id, 2)">重新上架</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="查看详情" :visible.sync="dialogDetails" width="80%" top="4vh">
            <detailsDialog v-if="dialogDetails" :config="config" :row="row" @closeDialog="closeDialog"></detailsDialog>
        </el-dialog>
    </div>
</template>

<script>
// import { getConfig } from '@/utils/auth';
import axios from 'axios';
import { getSource, offShelf, delSource, grounding } from '@/api/businessUser/release'
import detailsDialog from './components/detailsDialog.vue'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        detailsDialog
    },
    data() {
        //这里存放数据
        return {
            config: null,
            formInline: {
                zt: -1,
                ship_address: '',//发货地
                to_address: '',//收货地
                page: 1,
                pageSize: 10,
                type: -1
            },
            total: 0,
            tableData: [],
            tableLoading: false,
            dialogDetails: false,
            row: {},
            startAddress: '',//发货地回显

            endAddress: '',//收货地回显
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async getSource() {
            this.tableLoading = true;
            let res = await getSource(this.formInline);
            if (res.code == 200) {
                this.tableData = res.data;
                this.total = res.total;
            } else {
                this.$message.error(res.msg);
            }
            this.tableLoading = false;
        },
        handleSizeChange(pageSize) {
            this.formInline.pageSize = pageSize;
            this.formInline.page = 1;
            this.getSource();
        },
        handleCurrentChange(page) {
            this.formInline.page = page;
            this.getSource();
        },
        async handleDelete(index, id) {
            this.$confirm('确定要下架该货源吗？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await offShelf({ hyid: id })
                if (res.code == 200) {
                    this.getSource();
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => { });
        },
        async sourceHandler(index, id, type = 0) {
            let obj = {
                '0': '下架',
                '1': '删除',
                '2': '重新上架',
            }
            this.$confirm(`确定要${obj[type]}该货源吗？`, '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res;
                if (type == 0) {
                    res = await offShelf({ hyid: id })
                } else if (type == 1) {
                    res = await delSource({ hyid: id })
                } else {
                    res = await grounding({ hyid: id })
                }
                if (res.code == 200) {
                    this.getSource();
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => { });
        },
        detailsHandler(index, row) {
            this.row = row;
            this.dialogDetails = true;
        },
        closeDialog() {
            this.dialogDetails = false;
        },
        changeStatusSelect() {
            this.getSource();
        },
        onSubmit() {
            this.formInline.page = 1;
            this.getSource();
        },
        resetTable() {
            this.formInline = {
                zt: -1,
                ship_address: '',//发货地
                to_address: '',//收货地
                page: 1,
                pageSize: 10
            };
            this.getSource();
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        axios.get('https://api.zhgylgl.com/api/common/getConfig').then(res => {
            this.config = res.data ? res.data.data : {};
            this.getSource();
        })
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.main {
    width: 100%;
    min-height: calc(100vh - 70px);
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    overflow: auto;

}

::v-deep .el-pagination {
    margin-top: 20px;
}
</style>